<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>web 性能测试</title>
    <link rel="stylesheet" href="./index.css" />
  </head>
  <body>
    <div class="title">Performance example</div>
    <div class="move-box">Move</div>
    <img
      class="img1"
      src=""
      alt=""
    />
    <img class="img2" src="" alt="" />
    <img
      class="img3"
      src="https://img-qn.51miz.com/preview/element/00/01/31/40/P-1314051-90333C7B.png!/quality/90/unsharp/true/compress/true/format/png/fw/720"
      alt=""
    />
    <div id="container"></div>
    <script src="/wpDist/index.global.js"></script>
    <script>
      window.wv = new encodeMonitor.WebVitals({
        appId: 'encode-monitor',
        version: '1.0.0',
        reportCallback: (metrics) => {
          if (window.wv) {
            const infos = window.wv.getCurrentMetrics();

            const pageInfo = infos['page-information'];
            const networkInfo = infos['network-information'];
            const deviceInfo = infos['device-information'];

            function mergeData(data) {
              const {
                data: { name, ...metrics },
                ...rest
              } = data;
              if (name !== 'resource-flow' && name.indexOf('info') < 0) {
                return {
                  name,
                  ...metrics,
                  ...rest,
                  ...pageInfo.value,
                  ...networkInfo.value,
                  ...deviceInfo.value,
                };
              }
              return data;
            }
            console.log(mergeData(metrics));
          }
        },
        immediately: true,
        needCCP: true,
        logFpsCount: 10,
      });

      setTimeout(() => {
        document
          .querySelector('.img2')
          .setAttribute(
            'src',
            'https://img-qn.51miz.com/preview/element/00/01/31/40/P-1314051-90333C7B.png!/quality/90/unsharp/true/compress/true/format/png/fw/720',
          );
      }, 1000);

      wv.customContentfulPaint();

      function batchInsertNodeIntoContainer() {
        const count = 300;

        for (let i = 0; i < count; i++) {
          let node = document.createElement('div');
          node.innerHTML = '这是一个节点';
          node.style.width = '200px';
          node.style.height = '100px';
          document.querySelector('#container').append(node);
        }
      }

      wv.setStartMark('insertNode');
      batchInsertNodeIntoContainer();
      wv.setEndMark('insertNode');
    </script>
  </body>
</html>
